<template>
  <el-row :gutter="24" style="margin: 40px;">
    <el-col :span="8" v-for="tool in tools" :key="tool.title">
      <el-card shadow="hover" style="border-radius: 16px; text-align: center;">
        <el-icon style="font-size: 32px; margin-bottom: 8px;"><Tools /></el-icon>
        <h3>{{ tool.title }}</h3>
        <p style="color: #888; margin-bottom: 16px;">{{ tool.desc }}</p>
        <el-button type="primary" icon="el-icon-arrow-right">打开</el-button>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { Tools, ArrowRight } from '@element-plus/icons-vue'
const tools = [
  { title: '数据清洗', desc: '一键清洗原始数据' },
  { title: '可视化分析', desc: '数据图表与分析' },
  { title: '模型训练', desc: '快速训练AI模型' }
]
</script>
